<template>
  <div class='db-card-box' :style="{ height: height + '%' }">
    <div class="card-header flex-space-between paddinglr-15">
      <div class="title">
        <slot name="title">
          {{ title }}
        </slot>
      </div>
      <div v-if="operation" class="operation pointer flex-acenter">
        <slot name="operation"></slot>
      </div>
    </div>
    <div class="card-content width100 paddinglr-15">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Page'
    },
    operation: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '25%'
    }
  },
  created() {

  },
  mounted() {

  },
  data() {
    return {

    };
  },
  computed: {},
  watch: {},
  methods: {

  },

  components: {},
}
</script>

<style lang='less' scoped>
.db-card-box {
  background: url("@/assets/images/dashboard/db_big_header_title.png"),
    url("@/assets/images/dashboard/db_big_body_left.png"),
    url("@/assets/images/dashboard/db_big_body_center.png"),
    url("@/assets/images/dashboard/db_big_body_right.png"),
    url("@/assets/images/dashboard/db_big_footer_left.png"),
    url("@/assets/images/dashboard/db_big_footer_bottom.png"),
    url("@/assets/images/dashboard/db_big_footer_right.png");
  background-position: 0 0, 0 40px, 18px 40px, right 40px, left bottom, left 18px bottom 0, right bottom;
  background-size: 100% 40px, 18px calc(100% - 58px), calc(100% - 36px) calc(100% - 58px), 18px calc(100% - 58px), 18px 18px, calc(100% - 36px) 18px, 18px 18px;
  background-repeat: no-repeat;

  // width: 1440px;
  .card-header {
    // background: url("@/assets/images/dashboard/db_header.png") no-repeat;
    height: 40px;
    box-sizing: border-box;

    .title {
      font-family: "YOUSHEBIAOTIHEI-2";
      font-weight: 400;
      font-size: 18px;
      line-height: 40px;
    }
  }

  .card-content {
    // background: url("@/assets/images/dashboard/db_content.png") no-repeat;
    // background-size: 100% 100%;
    // height: calc(100% - 60px);
    overflow: auto;
  }

  .card-footer {
    // background: url("@/assets/images/dashboard/db_footer.png") no-repeat;
    // height: 20px;
  }
}</style>